<template>
  <div class="clothes-card" >
    <!-- 衣物图片 -->
    <div class="clothes-image-container">
      <img :src="clothes.imageUrls?.[0] || 'https://via.placeholder.com/300x300/eeeeee/cccccc?text=无图片'" alt="{{ clothes.name }}" class="clothes-image" />
      
      <!-- 收藏按钮 -->
      <div class="favorite-button" @click.stop="handleFavoriteToggle">
        <van-icon 
          :name="clothes.isFavorite ? 'star' : 'star-o'" 
          :color="clothes.isFavorite ? '#ff9500' : 'rgba(255, 255, 255, 0.8)'" 
          size="20" 
        />
      </div>
      
      <!-- 衣物标签 -->
      <div class="clothes-tags">
        <span v-if="clothes.season && clothes.season.length > 0" class="tag season-tag">{{ clothes.season.join('·') }}</span>
        <span v-if="clothes.occasions && clothes.occasions.length > 0" class="tag occasion-tag">{{ clothes.occasions.join('·') }}</span>
      </div>
    </div>
    
    <!-- 衣物信息 -->
    <div class="clothes-info">
      <div class="clothes-name">{{ clothes.name || '未命名' }}</div>
      <div class="clothes-details">
        <div class="clothes-category">{{ clothes.type }}</div>
        <div class="clothes-color" :style="{ backgroundColor: getCSSColorCode(clothes.color) }">
          <span v-if="clothes.color">{{ getColorName(clothes.color) }}</span>
        </div>
      </div>
      
      <!-- 穿着频率 -->
      <div class="wear-frequency" v-if="clothes.wearCount > 0">
        <van-icon name="fire-o" class="fire-icon" />
        <span class="wear-count">已穿 {{ clothes.wearCount }} 次</span>
      </div>
      
      <!-- 最后穿着时间 -->
      <div class="last-worn" v-if="clothes.lastWorn">
        <van-icon name="calendar-o" class="calendar-icon" />
        <span class="last-worn-text">上次穿: {{ formatDate(clothes.lastWorn) }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { useClothesStore } from '../store/clothes';

// Props
const props = defineProps({
  clothes: {
    type: Object,
    required: true
  },
  isPreview: {
    type: Boolean,
    default: false
  }
});

// Store
const clothesStore = useClothesStore();

// Router
const router = useRouter();


// 常见颜色名称映射
const colorNames = {
  '#ff0000': '红色',
  '#ff6600': '橙色',
  '#ffff00': '黄色',
  '#00ff00': '绿色',
  '#00ffff': '青色',
  '#0000ff': '蓝色',
  '#9900ff': '紫色',
  '#ff00ff': '粉色',
  '#000000': '黑色',
  '#ffffff': '白色',
  '#888888': '灰色',
  '#ffcccb': '浅红色',
  '#ffe4b5': '浅橙色',
  '#ffffe0': '浅黄色',
  '#f0fff4': '浅绿色',
  '#e0ffff': '浅蓝色',
  '#f0f8ff': '浅紫色',
  '#fff0f5': '浅粉色',
  '#a9a9a9': '深灰色',
  '#696969': '深灰色',
  '#dcdcdc': '浅灰色'
};

// 创建反向颜色映射：中文颜色名称 -> CSS颜色代码
const colorCodes = {};
for (const [code, name] of Object.entries(colorNames)) {
  colorCodes[name] = code;
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '';
  
  const date = new Date(dateString);
  const now = new Date();
  const diffTime = Math.abs(now - date);
  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
  
  if (diffDays === 0) {
    return '今天';
  } else if (diffDays === 1) {
    return '昨天';
  } else if (diffDays < 7) {
    return `${diffDays}天前`;
  } else if (diffDays < 30) {
    const weeks = Math.floor(diffDays / 7);
    return `${weeks}周前`;
  } else if (diffDays < 365) {
    const months = Math.floor(diffDays / 30);
    return `${months}个月前`;
  } else {
    const years = Math.floor(diffDays / 365);
    return `${years}年前`;
  }
};

// 获取颜色名称
const getColorName = (colorCode) => {
  if (!colorCode) return '';
  
  // 如果已经是中文颜色名称，直接返回
  if (typeof colorCode === 'string' && !colorCode.startsWith('#')) {
    return colorCode;
  }
  
  // 规范化颜色代码（转为大写）
  const normalizedColor = colorCode.toUpperCase();
  
  // 检查是否在常见颜色映射中
  for (const [code, name] of Object.entries(colorNames)) {
    if (code.toUpperCase() === normalizedColor) {
      return name;
    }
  }
  
  // 如果没有对应的名称，可以根据RGB值给出一个大致的描述
  return '自定义色';
};

// 获取CSS颜色代码
const getCSSColorCode = (colorName) => {
  if (!colorName) return '#cccccc'; // 默认灰色
  
  // 如果已经是CSS颜色代码，直接返回
  if (colorName.startsWith('#')) {
    return colorName;
  }
  
  // 查找对应的CSS颜色代码
  return colorCodes[colorName] || '#cccccc'; // 默认灰色
};


// 处理收藏切换
const handleFavoriteToggle = () => {
  clothesStore.toggleFavorite(props.clothes._id);
};

// 已经在顶部导入了useRouter
</script>

<style scoped>
.clothes-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
}

.clothes-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.clothes-image-container {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-color: #f8f8f8;
}

.clothes-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.clothes-card:hover .clothes-image {
  transform: scale(1.05);
}

.favorite-button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.favorite-button:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.clothes-tags {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: flex;
  gap: 8px;
}

.tag {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
}

.season-tag {
  background-color: rgba(64, 158, 255, 0.8);
}

.occasion-tag {
  background-color: rgba(255, 102, 0, 0.8);
}

.clothes-info {
  padding: 16px;
}

.clothes-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clothes-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.clothes-category {
  font-size: 14px;
  color: #666;
}

.clothes-color {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-indent: -9999px;
}

.clothes-color span {
  display: none;
}

.wear-frequency,
.last-worn {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}

.fire-icon,
.calendar-icon {
  margin-right: 4px;
  font-size: 12px;
}

.wear-count,
.last-worn-text {
  line-height: 1;
}

/* 预览模式下的样式调整 */
.clothes-card.is-preview {
  cursor: default;
}

.clothes-card.is-preview:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.clothes-card.is-preview .clothes-image {
  transition: none;
}

@media (max-width: 768px) {
  .clothes-image-container {
    height: 180px;
  }
  
  .clothes-info {
    padding: 14px;
  }
  
  .clothes-name {
    font-size: 15px;
  }
}
</style>